<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
</head>
<script type="text/javascript">

    $(function () {
        $.ajax({
            type: "post",
            url: "/dept/provinceList",
            data: {},
            dataType: "JSON",
            success: function (rm) {
                var pStr = '<option value="">请选择</option>';
                for (let i = 0; i < rm.data.length; i++) {
                    pStr += '<option value="' + rm.data[i].id + '">' + rm.data[i].pname + '</option>\n';
                }
                $("#pId").html(pStr);
            },
            error: function (rm) {
                alert(rm.msg)
            }
        });

        //区查询
        $.ajax({
            type: "post",
            url: "/dept/cityList",
            data: {},
            dataType: "JSON",
            success: function (rm) {
                var cities = rm.data;
                var cStr = '<option value="">请选择</option>';
                for (let j = 0; j < rm.data.length; j++) {
                    cStr += '<option value="' + cities[j].id + '">' + cities[j].cname + '</option>\n';
                }
                $("#cId").html(cStr);
            },
            error: function (rm) {
                alert(rm.msg)
            }
        });
    })

    function changePName() {
        var pId = $("#pId").val();
        // 地区查询
        $.ajax({
            type: "post",
            url: "/dept/cityList",
            data: {pId: pId},
            dataType: "JSON",
            success: function (rm) {
                var cities = rm.data;
                var cStr2 = '<option value="">请选择</option>';
                for (let j = 0; j < rm.data.length; j++) {
                    if (pId != cities[j].pid) {
                        $("#cId").html("");
                    } else {
                        cStr2 += '<option value="' + cities[j].id + '">' + cities[j].cname + '</option>\n';
                    }
                    $("#cId").html(cStr2);
                }
            },
            error: function (rm) {
                alert(rm.msg)
            }
        });
    }

    $(function () {
        // let flag = true;
        //部门名正则
        function checkName(deptName) {
            let regex = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
            //检验部门名
            // if(flag){
            //     $("#deptName").blur(function () {
            //         var deptName = $("#deptName").val();
            //         $.ajax({
            //             type: "post",//请求类型
            //             url: "/dept/deptDetail",//请求的url
            //             data: {deptName: deptName},//请求参数
            //             dataType: "JSON",//ajax接口（请求url）返回的数据类型
            //             success: function (rm) {//data：返回数据（json对象）
            //                 if (rm.status === 200) {
            //                     //账号可用，正确提示
            //                     $("#msg1").html(rm.msg);
            //                     flag = true;
            //                 } else if(deptName == rm.data.deptName){//账号已存在，错误提示
            //                     $("#reg_name").html(rm.msg);
            //                     flag = false;
            //                 }
            //             }
            //         });
            //     })
            // }
            return regex.test(deptName)
        }

        $("#deptName").focus(function () {
            $(this).css("border", "");
            $("#reg_name").html("");
        })

        $("#deptName").blur(function () {
            if (!checkName($(this).val())) {
                $("#reg_name").html("部门格式不正确")
                $(this).css("border", "1px solid red");
            }
        })
        //提交
        $("#submit").click(function () {
            let flag = true;
            if (!checkName($("#deptName").val())) {
                flag = false;
                $("#reg_name").html("部门名格式不正确")
                $("#deptName").css("border", "1px solid red");
            }

            if (flag) {
                $.ajax({
                    type: "post",
                    url: "/dept/deptAdd",
                    data: $("#Form").serializeArray(),
                    traditional: true,
                    async: true,
                    dataType: "JSON",
                    success: function () {
                        window.location.href = "findByPage";
                    },
                    error: function (rm) {
                        alert(rm.msg);
                    }
                });
            }
        })
    })

    // function deptSave() {
    //     $.ajax({
    //         type: "post",
    //         url: "/dept/deptAdd",
    //         data: $("#Form").serializeArray(),
    //         traditional: true,
    //         async: true,
    //         dataType: "JSON",
    //         success: function () {
    //             window.location.href = "findByPage";
    //         },
    //         error: function (rm) {
    //             alert(rm.msg);
    //         }
    //     });
    // }

    // function deptInput() {
    //     var deptId = $("#deptId").val();
    //     $.ajax({
    //         type: "post",//请求类型
    //         url: "/dept/deptDetail",//请求的url
    //         data: {deptId: deptId},//请求参数
    //         dataType: "JSON",//ajax接口（请求url）返回的数据类型
    //         success: function (rm) {//data：返回数据（json对象）
    //             if (rm.status === 400) {//账号已存在，错误提示
    //                 $("#msg1").html(rm.msg);
    //             } else if (rm.status === 200) {//账号可用，正确提示
    //                 $("#msg1").html(rm.msg);
    //             } else if (deptId === null || deptId === "") {
    //                 $("#msg1").html("请输入用户编号");
    //             }
    //         }
    //     });
    // }
</script>
<body>
<form id="Form">
    <div class="place"><span>位置：</span>
        <ul class="placeul">
            <li><a href="../dept/findByPage">系统管理</a></li>
            <li><a href="../dept/findByPage">部门管理</a></li>
            <li><a href="../dept/deptAdd">添加</a></li>
        </ul>
    </div>
    <div class="formbody">
        <div class="formtitle"><span>部门信息</span></div>
        <ul class="forminfo">
            <li>
                <label>部门名称</label>
                <input name="deptName" type="text" class="dfinput" id="deptName" />
                <i id="reg_name">必填，不能超过30个字符</i>&nbsp;<font color="red" id="msg1"></font>
            </li>
            <li>
                <label>所属区域</label>
                <select class="dfselect" id="pId" name="pId" onchange="changePName()">
                    <option value="">请选择</option>
                    <!--          <option>北京</option>-->
                    <!--          <option>江苏</option>-->
                    <!--          <option>天津</option>-->
                </select>
                省
                <select class="dfselect" id="cId" name="cId">
                    <option value="">请选择</option>
                    <!--          <option>北京</option>-->
                    <!--          <option>南京</option>-->
                    <!--          <option>天津</option>-->
                </select>
                市
<!--                <i>必选</i>-->
            </li>


            <li>
                <label>&nbsp;</label>
                <input name="" type="button" class="btn" value="确认保存" id="submit"/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="" type="button" class="btn" value="返回" onclick="window.history.go(-1);"/>
            </li>
        </ul>
    </div>
</form>
</body>
